<template>
<div>
  <div class="top">
    <el-image src="./static/img/title.png" fit="contain" style="width: 300px;align-self: flex-start"></el-image>
    <el-menu @select="handleSelect" default-active="1" style="width: 700px" mode="horizontal" active-text-color="#ff9900">
      <el-menu-item index="1" route="/">首页</el-menu-item>
      <el-menu-item index="2">我的工作台</el-menu-item>
      <el-menu-item index="3">关于我们</el-menu-item>
    </el-menu>
    <el-link style="color: chocolate" href="http://localhost:8080/#/login" v-if="!user">亲，请登录</el-link>
    <span v-if="user">欢迎您</span>
  </div>
  <div  class="research">
    <el-input prefix-icon="el-icon-search" placeholder="请输入搜索内容"></el-input>
    <el-button style="background-color: chocolate;color: white">搜索</el-button>
  </div>
  <div class="info">
    <div class="left">
      <img :src="goods.pic">
    </div>
    <div class="right">
      <div>{{goods.name}}</div>
      <div style="color: red">供货价格：￥{{goods.price}}</div>
      <div>当前库存：{{goods.storage}}</div>
      <div>选择借卖数量：<el-input-number @change="priceChange"
        v-model="num" :min="1" :max="Number(goods.storage)">
      </el-input-number></div>
      <div>请输入借卖定价：<el-input
        style="width: 300px"
        placeholder="请输入内容"
        v-model="price"
        clearable>
      </el-input></div>
      <div style="color: chocolate">需支付的借卖费用为：{{totalPrice}}</div>
      <el-button style="width: 300px" type="warning"  @click="buy">一键借卖</el-button>

    </div>
  </div>
  <div class="region">
    <h3>猜你喜欢</h3>
        <ul>
          <!-- v-for key值 -->
          <li class="goods" v-for="item in refList">
            <!-- 图片 -->
            <div class="goodsPhoto" @click="toGoodsInfo(item)">
              <img :src="item.pic" width="200px" height="200px">
              <div>{{item.name}}</div>
              <div>{{item.price}}元</div>
            </div>
          </li>
        </ul>
  </div>
</div>
</template>

<script>
export default {
  name: "goodsInfo",
  mounted() {
    this.user = JSON.parse(window.sessionStorage.getItem("user"));
    //获取所有上架商品
    this.getRequest("../../static/index/class1.json").then(res=>
    {
      for(let i=0,length=res.length;i<length;i++)
      {
        this.refList.push(res[i]);
      }
    })
    this.goods = this.$route.query;
    this.totalPrice = this.goods.price;
    console.log(this.goods)
  },
  data(){
    return{
      goods:[],
      user:'',
      num:0,
      price:0,
      totalPrice:0,
      refList:[],
    }
  },
  methods: {
      handleSelect(index)
      {
        if(index==='1')
        {
          this.$router.push("/")
        }else if(index==='2')
        {
          if(this.user)
          {
            let identity = this.user.identity;
            if(identity==='1')
            {
              this.$router.push("/admin");
            }
            else if(identity==='2')
            {
              this.$router.push("/home");
            }else
            {
              this.$router.push("/cvo");
            }
          }else
          {
            this.$router.push("/login")
          }

        }else
        {
          this.dialogVisible = true;
        }
      },
      priceChange(event)
      {
        this.totalPrice = event * this.goods.price;
      },
    toGoodsInfo(item)
    {
      this.$router.push({
        name:'GoodsInfo',
        query:item
      });
      location.reload();
    },
    buy(){
      this.$message({
        message: '借卖成功！可前去工作台-我的店铺查看',
        type: 'success'
      });
    }
    }
}
</script>

<style scoped>
.top{
  padding: 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.research
{
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px auto;
}
.info{
  display: flex;
  margin-top: 20px;
  justify-content: center;
  align-items: center;
}
.left{
  width: 400px;
  height:350px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.right{
  width: 600px;
  height: 350px;
  font-size: large;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.region{
  color: chocolate;
  margin:auto 100px;
}
.goods{
  display: block;
  float: left;
  align-items: center;
  width: 250px;
  height: 280px;
}
.goodsPhoto{

  text-align: center;
  margin: 10px 0;
}
</style>
